<template>
  <view :style="colorStyle">
    <view class="infobox4" @click="back" :style="navTitleModuleStyle">
      <view class="block1">
        <image src="@/static/img/img68.png" mode=""></image>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view
      class="infobox5"
      :style="{
        top: `${menuInfo.top + 6}px`,
      }"
    >
      登录
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view
      class="infobox5"
      :style="{
        top: `48rpx`,
      }"
    >
      登录
    </view>
    <!-- #endif -->
    <view class="" style="height: 262rpx"> </view>
    <view class="infobox2">
      <view class="block1 flex aitems">
        <view class="info2">
          <view class="tip1"> 乐皇阁 </view>
          <view class="tip2"> 您正在操作登录账号 </view>
        </view>
      </view>
      <view class="block5 flex aitems">
        <view
          class="info1"
          v-for="(item, index, key) in loginList"
          :key="key"
          @click="loginListindex = index"
        >
          <view :class="loginListindex == index ? 'tip1 tip2' : 'tip1'">
            <span
              :style="{
                color: `var(--view-theme)`,
              }"
              >{{ item.name }}</span
            >
            <view class="border" v-if="loginListindex == index"> </view>
          </view>
        </view>
      </view>
      <view class="block2">
        <view class="info1 flex aitems">
          <view class="tipbox1">
            <image
              src="@/static/login/img1.png"
              mode=""
              :style="{ background: ` var(--view-theme)` }"
            ></image>
          </view>
          <view class="tipbox2" style="width: calc(100% - 20rpx - 48rpx)">
            <input
              type="text"
              v-model="data1"
              class="c333 f32"
              maxlength="11"
              placeholder="请输入手机号码"
              placeholder-class="c999 f32"
            />
          </view>
        </view>
        <view class="info1 flex aitems">
          <view class="tipbox1">
            <image
              src="@/static/login/img2.png"
              mode=""
              :style="{ background: ` var(--view-theme)` }"
            ></image>
          </view>
          <view class="tipbox2">
            <input
              type="text"
              v-model="data3"
              placeholder="请输入验证码"
              placeholder-class="c999 f32"
              maxlength="6"
            />
          </view>
          <view class="tipbox4 fontWeight" @click="getCode">
            {{ Countdown }}
          </view>
        </view>
      </view>
      <view class="block3 flex">
        <view class="info1" @click.stop="check = !check">
          <radio
            :checked="check"
            color="var(--view-theme)"
            style="transform: scale(0.7)"
          />
        </view>
        <view>
          <text class="info2 c999 f24"> 我已阅读并同意 </text>
          <text class="info3 f24 fontWeight">
            <text
              class="tip1"
              @click="
                gourl('/pages/user/xieyi?title=用户协议&key=user_agreement')
              "
            >
              《用户协议》
            </text>
            <text
              class="tip2"
              @click="
                gourl('/pages/user/xieyi?title=隐私政策&key=privacy_agreement')
              "
            >
              《隐私政策》
            </text>
            <!-- <text
              class="tip2"
              @click="
                gourl(
                  '/pages/user/xieyi?title=消费者权益保障措施说明&key=DescriptionConsumerRightsProtectionMeasures'
                )
              "
            >
              《消费者权益保障措施说明》
            </text> -->
          </text>
        </view>
      </view>
      <view class="block4">
        <view class="info1 globalBtn" @click="oauthtoken"> 登录 </view>
      </view>

      <!-- <svg class="icon outerColor" aria-hidden="true">
        <use xlink:href="#icon-lingquanzhongxin" ref="external nofollow"></use>
      </svg> -->
    </view>

    <tf-verify-img
      @succeed="chenggong"
      @close="showVerify = false"
      v-if="showVerify"
      :verifyImgs="imgs"
    ></tf-verify-img>
  </view>
</template>

<script>
import colors from "@/mixins/color";
const app = getApp();
import { msg, back, showModal, go, loading, backtime } from "@/utils/wxAPI";
import tfVerifyImg from "@/components/tf-verify-img/tf-verify-img.vue";
import { smsCode, oauthtoken } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { isvalidatemobile } from "@/utils/validate.js";
import { getStorage, removeStorage } from "../../utils/storage";
const md5 = require("@/utils/md5");
export default {
  mixins: [colors],
  data() {
    return {
      showVerify: false,
      imgs: [
        {
          src: "/static/verify/0.jpeg",
          color: "#38a7b7",
        },
        {
          src: "/static/verify/1.jpeg",
          color: "#485967",
        },
      ],
      menuInfo: {},
      options: {},
      check: false,
      isSeePwd: false,
      loginType: 1, //1账号密码 2短信验证码

      data1: "", //账号
      data2: "", //密码
      data3: "", //短息验证码

      Countdown: "获取验证码",
      loginList: [
        {
          name: "验证码登录",
        },
      ],
      loginListindex: 0,
      navTitleModuleStyle: "",
    };
  },
  async onLoad(options) {
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${this.menuInfo.top + 6}px`;
    // #endif

    this.options = options;

    if (uni.getStorageSync("username")) {
      this.data1 = uni.getStorageSync("username");
      this.data2 = uni.getStorageSync("password");
    }

    if (app.globalData.token) {
      //有token执行
      //这里推荐执行分页
    } else {
      //没token执行
      // await islogin();
    }
  },
  async onShow() {
    if (app.globalData.token) {
      //有token执行
      //这里执行返回页面得执行
      //不推荐执行分页
      //执行需要回显得接口
      if (uni.getStorageSync("ref")) {
        // uni.removeStorageSync('ref')
        // this.current = 1;
        //刷新分页
      }
    }
  },
  /**** 方法层 ****/
  methods: {
    async oauthtoken() {
      if (isvalidatemobile(this.data1)[0]) {
        return msg(isvalidatemobile(this.data1)[1]);
      }
      if (!this.data3) {
        return msg("请输入验证码");
      }
      if (!this.check) {
        return msg(`请阅读并同意《用户协议》《隐私政策》`);
      }
      loading();
      let { data } = await oauthtoken({
        username: this.data1,
        password: this.data3,
        grant_type: "mobile",
        // password: md5(this.data3),
        // grant_type: "password",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        app.globalData.token = info.access_token;
        uni.setStorageSync("token", info.access_token);
        uni.setStorageSync("username", this.data1);
        uni.setStorageSync("password", this.data3);
        let refUrl = getStorage("refUrl");
        if (refUrl) {
          removeStorage("refUrl");
          window.location.href = refUrl;
        }
        uni.switchTab({
          url: "/pages/index/index",
        });
      }
    },

    async getCode() {
      if (this.Countdown == "获取验证码") {
        if (isvalidatemobile(this.data1)[0]) {
          return msg(isvalidatemobile(this.data1)[1]);
        }
        this.showVerify = true;
      }
    },

    async chenggong() {
      this.showVerify = false;
      this.check = true;
      loading();
      let { data } = await smsCode({
        mobile: this.data1,
      });
      uni.hideLoading();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        try {
          let num = 60;
          this.Countdown = num;
          this.timer = setInterval(() => {
            num -= 1;
            this.Countdown = num;
            if (this.Countdown == 0) {
              this.Countdown = "获取验证码";
              clearInterval(this.timer);
            }
          }, 1000);
        } catch (e) {}
      }
    },

    checkChange() {
      this.check = !this.check;
    },
    seePwdChange() {
      this.isSeePwd = !this.isSeePwd;
    },
    gourl(url) {
      console.log(url);
      go(url);
    },

    back() {
      back();
    },

    backtime() {
      backtime();
    },
  },
  /**** 方法层 ****/

  /***下拉刷新 触底刷新***/
  async onReachBottom() {},
  async onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  /***下拉刷新 触底刷新***/
};
</script>
<style lang="scss" scoped>
page {
  background: #fff;
}

.infobox4 {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  top: 50rpx;
  left: 32rpx;
  z-index: 999;

  .block1 {
    width: 40rpx;
    height: 40rpx;
  }
}

.infobox1 {
  width: 344rpx;
  position: absolute;
  right: 0;
}

.infobox2 {
  width: 670rpx;
  position: relative;
  z-index: 9;
  margin: auto;

  .block1 {
    .info1 {
      width: 112rpx;
      height: 112rpx;
    }

    .info2 {
      // margin-left: 16rpx;

      .tip1 {
        color: var(--view-theme);
        font-size: 40rpx;
        font-weight: 700;
      }

      .tip2 {
        color: var(--view-theme);
        font-size: 28rpx;
        margin-top: 8rpx;
      }
    }
  }

  .block2 {
    margin-top: 72rpx;

    .info1 {
      background: #f5f5f5;
      // background: red;
      // width: 480rpx;
      height: 88rpx;
      border-radius: 18rpx;
      margin: 0 auto 44rpx;
      padding: 0 40rpx;
      position: relative;

      .tipbox1 {
        width: 48rpx;
        height: 48rpx;
        // background: ;
      }

      .tipbox2 {
        margin-left: 20rpx;
        width: calc(100% - 20rpx - 48rpx - 120rpx);

        input {
          width: 100%;
        }

        .placeholder {
        }
      }

      .tipbox3 {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 40rpx;
      }

      .tipbox4 {
        font-size: 24rpx;
        min-width: 120rpx;
        text-align: right;
        color: var(--view-theme);
      }
    }
  }

  .block3 {
    margin: 122rpx auto 0;

    .info1 {
      // width: 32rpx;
      // height: 32rpx;
    }

    .info2 {
      // margin-left: 20rpx;
    }

    .info3 {
      color: var(--view-theme);

      .tip1 {
      }

      .tip2 {
      }
    }
  }

  .block4 {
    margin-top: 28rpx;

    .info1 {
      margin: auto;
    }

    .info2 {
      margin: 48rpx 0 0;
    }
  }

  .block5 {
    margin: 72rpx 0 0;

    .info1 {
      margin: 0 48rpx 0 0;
      position: relative;

      .tip1 {
        color: #333;
        font-size: 32rpx;
        position: relative;
        z-index: 9;

        span {
          position: relative;
          z-index: 9;
        }

        .border {
          background: linear-gradient(
            90deg,
            var(--view-theme) 0%,
            rgba(249, 141, 29, 0) 100%
          );
          height: 16rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }

      .tip2 {
        color: #0d6e1a;
        font-weight: bold;
        font-size: 36rpx;
      }
    }
  }
}

.infobox3 {
  position: fixed;
  width: 100%;
  bottom: 30rpx;
}

.flooter {
  position: fixed;
  bottom: 30rpx;
  width: 100%;
  font-size: 28rpx;
}

image {
  width: 100%;
  height: 100%;
  display: flex;
}

.globalBtn {
  border-radius: 16rpx;
  background: var(--view-theme);
  color: #fff;
  font-weight: bold;
  font-size: 28rpx;
  text-align: center;
  width: 670rpx;
  padding: 20rpx 0;
}

.infobox5 {
  text-align: center;
  color: #1f1f1f;
  font-weight: bold;
  width: 100%;
  position: absolute;
  font-size: 32rpx;
}
</style>
